<!DOCTYPE html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

<body>
	<div class="container-fluid">
		<div class="card">
			<div class="card-body">
				<div id="toolbar" style="width: 70vw;">
					<form class="row" role="form" onsubmit="javascript:return false;">
						<div class="col-md-3">
							<input type="text" class="form-control" name="keyWord" placeholder="请输入搜索内容" />
						</div>
						<div class="col-md-3">
							<button class="btn btn-primary" data-toggle="tableSearch">搜索</button>
							<button type="reset" class="btn btn-default ms-1">重置</button>
						</div>
					</form>
					<div class="mt-2">
						<button class="btn btn-primary me-1" data-handle="add" data-perm="device/add" hidden><i class="mdi mdi-plus"></i>
							新增</button>
					</div>
				</div>
				<table id="table"></table>
			</div>
		</div>
	</div>
	<script id="dialog" type="text/html">
		<form class="needs-validation" novalidate  id="dialogForm">
			<input type="text" name="id" hidden>
		  <div class="row mb-3">
		    <label for="mac" class="col-sm-2 col-form-label text-end required">MAC</label>
		    <div class="col-sm-10">
		      <input type="text" class="form-control" name="mac" required>
		    </div>
		  </div>
		  <div class="row mb-3">
		    <label for="name" class="col-sm-2 col-form-label text-end required">名称</label>
		    <div class="col-sm-10">
		      <input type="text" class="form-control" name="name" required>
		    </div>
		  </div>
		  <div class="row mb-3">
		    <label for="longitude" class="col-sm-2 col-form-label text-end required">经度</label>
		    <div class="col-sm-10">
		      <input type="number" step="0.000001" class="form-control" name="longitude" required >
		    </div>
		  </div>
		  <div class="row mb-3">
		    <label for="latitude" class="col-sm-2 col-form-label text-end required">维度</label>
		    <div class="col-sm-10">
		      <input type="number" step="0.000001" class="form-control" name="latitude" required >
		    </div>
		  </div>
		  <div class="row mb-3">
		    <label for="address" class="col-sm-2 col-form-label text-end">地址</label>
		    <div class="col-sm-10">
		      <input type="text" class="form-control" name="address" >
		    </div>
		  </div>
		  <div class="row mb-3">
		    <label for="description" class="col-sm-2 col-form-label text-end">描述</label>
		    <div class="col-sm-10">
		      <textarea class="form-control" name="description" rows="3"></textarea>
		    </div>
		  </div>
		  <div class="row">
			 <div class="col-md-4 offset-md-8">
				<button type="button" class="btn btn-secondary me-1 " data-bs-dismiss="modal">取消</button>
				<button type="submit" class="btn btn-primary">保存</button>
			</div>
		  </div>
		</form>
	</script>
	<script type="module">
		import admin from "/admin/js/admin.js"
		var layer = admin.getModule("layer");
		var request = admin.getModule("request");
		var button = admin.getModule("button");
		var form = admin.getModule("form");
		var table = admin.getModule("table");

		var dialogHtml = $("#dialog").html();
		var dialogData = {
			handle: '',
			dialog: null,
		};

		var tableInst = table.initTable({
			elem: "#table",
			url: 'device/search',// 请求地址
			showColumns: true, //显示所有列
			sortable: true,
			sortName: "createtime",
			sortOrder: 'desc',
			showPrint:true, //打印
			showExport:true, //导出
			exportOptions:{
				fileName:"设备",
			},
			onPostBody: function () {
				$("#table [role='switch']").change(function () {
					var value = $(this).val();
					var checked = this.checked;
					var param = {mac: $(this).val(), open: this.checked ? "1" : "0"};
					request.post('device/switchDevice', param);
				})
			},
			columns: [{
				field: 'mac',
				align: 'center',
				title: 'MAC',
			}, {
				field: 'name',
				align: 'center',
				title: '名称',
			}, {
				field: 'address',
				// 是否可视(默认 - true)
				align: 'center',
				title: '地址'
			}, {
				field: 'description',
				align: 'center',
				title: '描述'
			}, {
				field: 'open',
				align: 'center',
				title: '开关',
				formatter: openFormatter,
			}, {
				field: 'createtime',
				align: 'center',
				title: '创建时间',
				sortable: true,
				order: 'desc'
			}, {
				title: '操作',
				formatter: btnGroup,  // 自定义方法
				events: {
					'click .edit-btn': edit,
					'click .del-btn': deleteHandle
				}
			}]
		})

		$('[data-handle="add"]').click(function () {
			add();
		})

		function add() {
			dialogData.handle = "device/add";
			dialogData.dialog = layer.dialog("添加设备", dialogHtml);
			dialogEvent();
			initSelect();
		}

		function edit(e, value, row, index) {
			dialogData.handle = "device/edit";
			dialogData.dialog = layer.dialog("修改设备", dialogHtml);
			dialogEvent();
			$("#dialogForm input[name='mac']").attr("readonly", "true")
			form.val("#dialogForm", row)
		}

		function deleteHandle(e, value, row, index) {
			layer.confirm("确认删除设备" + row.name, function () {
				request.postAlert("device/delete", {id: row.mac}).then(res => {
					tableInst.bootstrapTable("refresh");
				})
			})
		}

		function dialogEvent() {
			$("#dialogForm").submit(function () {
				var btn = button.load({elem: "#dialogForm button[type='submit']"});
				if (!form.validate($(this))) {
					btn.stop();
					return false;
				}
				var data = form.val($(this));
				data.roleIds = $("#roleIds").selectpicker('val');
				request.postAlert(dialogData.handle, data).then(res => {
					dialogData.dialog.hide();
					tableInst.bootstrapTable("refresh");
				}).catch(err => {
					btn.stop();
				})
				return false;
			})
		}

		function initSelect(data) {
			$("#roleIds").html();
			request.post("role/listAll").then(res => {
				res.data.forEach(item => {
					var option = `<option value="${item.id}">${item.name}</option>`;
					$("#roleIds").append(option);
				})
				$("#roleIds").selectpicker('val', data);
			})
		}

		function openFormatter(value, row, index, field) {
			var checked = "";
			if (row.open == '1') {
				checked = "checked";
			}
			var html = `
				<div class="form-check form-switch d-flex justify-content-center">
				  <input class="form-check-input" type="checkbox" role="switch" value=${row.mac} ${checked}>
				</div>
				`
			return html;
		}
		// 自定义操作按钮
		function btnGroup() {
			let html =
				'<a href="#!" class="btn btn-sm btn-default me-1 edit-btn"  title="编辑" data-perm="device/edit" hidden><i class="mdi mdi-pencil"></i></a>' +
				'<a href="#!" class="btn btn-sm btn-default del-btn"  title="删除" data-perm="device/delete" hidden><i class="mdi mdi-trash-can-outline"></i></a>';
			return html;
		}

	</script>
</body>

</html>